<template>
    <div class="app-container">
        <div class="aside">
            <el-tabs tab-position="left" style="height: 200px;" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="个人中心" name="userinfo">个人中心</el-tab-pane>
                <el-tab-pane label="我的订单" name="orderinfo">配置管理</el-tab-pane>
                <el-tab-pane label="我的文章" name="bloginfo">角色管理</el-tab-pane>
            </el-tabs>
            <!-- <el-button @click="goInfo">个人信息</el-button>
            <el-button @click="goOrder">我的订单</el-button>
            <el-button @click="goBlog">我的游记</el-button> -->
        </div>
        <div class="userinfo">
            <!-- <router-view></router-view> -->
            <UserInfo v-show="activeName === 'userinfo'" />
            <OrderInfo v-show="activeName === 'orderinfo'" />
            <BlogInfo v-show="activeName === 'bloginfo'" />

            <!-- <el-tabs tab-position="top" style="height: 600px;">
                <el-tab-pane label="个人信息">用户管理</el-tab-pane>
                <el-tab-pane label="我的订单">配置管理</el-tab-pane>
                <el-tab-pane label="我的文章">角色管理</el-tab-pane>
            </el-tabs> -->
            <!-- <OrderInfo />
            <BlogInfo /> -->

        </div>
    </div>
</template>
 
<script>
import UserInfo from '@/components/user/UserInfo.vue';
import OrderInfo from '@/components/order/OrderInfo.vue';
import BlogInfo from '@/components/blog/BlogInfo.vue';

export default {
    name: 'User',
    components: {
        UserInfo,
        OrderInfo,
        BlogInfo
    },
    created() {
        // this.goInfo()
        console.log(this.activeName);
    },
    data() {
        return {
            activeName: 'userinfo',
            isShow: 'userinfo'
        }
    },
    methods: {
        goInfo() {
            this.$router.push('/userinfo')
        },
        goOrder() {
            this.$router.push('/orderInfo')
        },
        goBlog() {
            this.$router.push('/blogInfo')
        },
        handleClick(tab, event) {
            console.log(tab, event)
            console.log(this.avtiveName)
            // if (this.avtiveName === 'userinfo') {
            //     this.isShow = 'userinfo'
            // }else if(this.activateName === 'orderinfo') {
            //     this.isShow = 'orderinfo'
            // }else if(this.activateName === 'bloginfo'){
            //     this.isShow = 'bloginfo'
            // }
            // if (this.activateName === 'userinfo') {
            //     this.$router.push('/userinfo')
            // }else 
            // if (this.activateName === 'orderinfo') {
            //     this.$router.replace('/orderinfo')
            // }else {
            //     this.$router.replace('/bloginfo')
            // }
        }
    }
}
</script>
 
<style lang="less" scoped>
/deep/ .el-tabs__active-bar {
    background-color: #c59620;
}

/deep/ .el-tabs__item:hover {
    color: goldenrod;
}

/deep/ .el-tabs__item.is-active {
    color: goldenrod;
}

.app-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;

    .aside,
    .userinfo {
        margin-top: 20px;
    }

    .userinfo {
        margin-bottom: 10px;
    }

    .aside {
        display: flex;
        flex-direction: column;
        width: 100px;
        margin-right: 50px;
        align-items: center;

        .el-button {
            width: 100px;
        }
    }

    .userinfo {
        width: 900px;

    }

}
</style>